<template>
  <h3>{{ eidtId ? "编辑" : "新建" }}管理员</h3>
  <div class="createClass">
    <el-form
      :inline="true"
      :model="category.categoryMsg"
      class="demo-form-inline"
      @submit="() => false"
    >
      <el-form-item label="管理员账号">
       <el-input v-model="category.categoryMsg.username" placeholder="请输入管理员账号"/>
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input
          v-model="category.categoryMsg.password"
          placeholder="请输入分类名"
          type="password"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit"
          >{{ eidtId ? "更新" : "创建" }}管理员</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, reactive } from "vue";
import {
  creatAdmin,
  getAdminMsg,
  upDateAdmin,
} from "@/api/getAdmin";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
//分类信息
const category = reactive({
  categoryMsg: {
    username: "",
    password: "",
  },
  //父级信息
  parent: <any>[],
});

const router = useRouter();
const route = useRoute();

const eidtId = computed(() => {
  return route.params.id;
});
//提交分类信息
const onSubmit = async () => {
  console.log(category.categoryMsg)
  let result;
  if (route.params.id) {
    //更新分类数据
    result = await upDateAdmin(eidtId.value, category.categoryMsg);
  } else {
    //添加分类
    result = await creatAdmin(category.categoryMsg);
  }

  if (result.status === 200) {
    router.push({
      path: "/home/adminUserList",
    });
    //消息提示框
    ElMessage({
      message: "保存成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "保存失败",
      type: "warning",
    });
  }
};

//获取被编辑数据的详情
const getEdit = async () => {
  let result = await getAdminMsg(eidtId.value);

  if (result.status === 200) {
    category.categoryMsg = result.data;
  }
};


onBeforeMount(() => {

  if (route.params.id) getEdit();
});
</script>

<style lang="less" scoped>
.createClass {
  margin: 20px 20px 0 20px;
}
</style>
